<template>
  <LoadingView v-if="dataLoading" font-size="14px" />
  <FlowViewer
    v-else-if="modelXml"
    ref="flowViewer"
    node-popup
    class="bpmn-preview-view"
    :xml="modelXml"
    :events="['element.mousemove']"
    :activities="highlightNode"
    :historic-activities="highlightLine"
    @element-mousemove="getNodeInfo">
    <template #default>
      <template v-if="loading">
        <LoadingView class="flex-item" font-size="14px" />
      </template>
      <template v-else>
        <h3>{{ node.name }}</h3>
        <p v-if="node.handlers">
          审批人员：
          <ElTag
            v-for="item in node.handlers"
            :key="item.username"
            :type="item.status === 'doing' ? 'warning' : item.status === 'done' ? 'success' : ''"
            disable-transitions
            style="margin-right: 4px; margin-bottom: 4px">
            {{ item.name }}
          </ElTag>
        </p>
        <p>节点类型：{{ node.nodeType || '' }}</p>
        <p>节点状态：{{ node.status || '' }}</p>
        <p>开始时间：{{ node.startDate || '' }}</p>
        <p>结束时间：{{ node.endDate || '' }}</p>
        <p>审批耗时：{{ node.duration || '' }}</p>
      </template>
    </template>
  </FlowViewer>
</template>

<script>
  import { getHighLightedNode, getNodeInfo } from '@/api/admin/workitem'

  export default {
    name: 'FlowProgressView',
    props: {
      businessKey: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        node: {
          handlers: '',
          name: '',
          nodeType: '',
          status: '',
          startDate: '',
          endDate: ''
        },
        modelXml: '',
        loading: false,
        dataLoading: false,
        highlightNode: [],
        highlightLine: [],
        cache: {}
      }
    },
    watch: {
      businessKey: {
        immediate: true,
        handler: 'init'
      }
    },
    methods: {
      async init() {
        if (this.businessKey) {
          this.dataLoading = true
          try {
            const response = await getHighLightedNode(this.businessKey)
            const res = response.data.data
            this.highlightLine = res.highLightedFlows
            this.highlightNode = res.activeActivityIds
            this.modelXml = res.modelXml
          } catch (e) {}
          this.dataLoading = false
        }
      },
      async getNodeInfo(element) {
        if (element.type !== 'bpmn:UserTask') {
          return
        }
        if (!this.cache[element.id]) {
          if (this.loading) {
            return
          }
          this.loading = true
          try {
            const response = await getNodeInfo(this.businessKey, element.id)
            this.cache[element.id] = response.data.data
          } catch (e) {}
          this.loading = false
        }
        this.node = this.cache[element.id]
      },
      fitViewportCenter() {
        this.$refs.flowViewer.fitViewportCenter('auto')
      }
    }
  }
</script>

<style lang="scss">
  .bpmn-preview-view {
    width: 100%;
    height: 100%;

    .bjs-powered-by {
      display: none;
    }
  }
</style>
